<template>
  <div class="home">
    <button @click="add">+</button>
    <h2>{{ num }}</h2>


    {{ name }}
    {{ age }}
    {{ score }}
    <button @click="change">改变</button>
  </div>

  <div v-for="item in cateList">
    {{ item.name }}
  </div>

</template>

<script>
// ref   响应式  基本数据类型   ref是被reactive模拟出来的
// reactive  响应式  引用
import { ref, reactive, toRefs, onBeforeMount, watch } from "vue"
import axios from "axios"

export default {

  setup(props, context) {
    // console.log(props)
    // console.log(context)
    // return {
    //   add, num,
    // }


    // ref数据 需要加value
    let num = ref(0)
    function add() {
      num.value++
    }

    let person = reactive({
      name: "张三",
      age: 20,
      score: 30,
    })


    let { name, age, score } = toRefs(person)//结构以后失去响应式
    // let name=ref(person.name)
    // let age=ref(person.age)
    // let score=ref(person.score)

    function change() {
      age.value++
      score.value--
      if (age.value > 25) {
        // 不监听了
        personWatch()
      }
    }
    // 监听

    //watch  监听属性

    let personWatch = watch([age, name, score], (n, o) => {
      console.log(n)
      console.log(o)
    }, {
      deep: true,
      immediate: true
    })


    // watch([age,name,score],(n,o)=>{
    //   console.log(n)
    //   console.log(o)
    // },{
    //   deep:true,
    //   immediate:true
    // })




    // onBeforeMount
    onBeforeMount(function () {
      console.log("挂载前")
      getCate()
    })
    let cateList = ref([])
    async function getCate() {
      let res = await axios.get('https://d33a5037-6c63-4e92-8bb1-30018ab701ea.bspapp.com/http/api/get_cate_list')
      console.log(res.data.data)
      cateList.value = res.data.data
    }






    return {
      name, age, score,
      person,
      change,
      add,
      num,
      cateList,
    };
  }
}
</script>
